<template>
  <div class="index-box" ref="index">
      <div class="menuList" ref="menuList">
        <div class="menu-item" :class="[item.orderStatus==searchForm.orderStatus?'active':'']"  @click="handleItem(item.orderStatus)" v-for="(item,index) in menuList">
          <div class="numberBox">
            <span class="number">{{item.count}}<!-- <span class="tipsNumber">9</span> --></span>
          </div>
          <div class="text">{{item.msg}}</div>
        </div>
      </div>
        <div class="search" ref="search">
         <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
           class="demo-form-inline" id="searchBox">
           <el-form-item prop="orderNo">
               <el-input v-model="searchForm.orderNo" clearable placeholder="订单编号"></el-input>
           </el-form-item>
           <el-form-item prop="account">
               <el-input v-model="searchForm.account" clearable placeholder="用户手机号或昵称"></el-input>
           </el-form-item>

           <el-form-item prop="time">
             <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="更新开始日期" end-placeholder="更新结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
          <!-- <el-form-item prop="updateTime">
             <el-date-picker v-model="updateTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="状态更新开始日期" end-placeholder="状态更新结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item> -->


           <el-form-item class="clearfix">
             <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
             <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
             <el-button
               style="margin-left:10px"
               type="warning"
               icon="el-icon-download"
               size="small"
               :loading="btnLoading"
               @click="handleExport"
             >导出</el-button>
           </el-form-item>

           <el-form-item style="margin-left: auto;">
              <MyRefresh/>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
           </el-form-item>
         </el-form>
        </div>
        <div class="table orderTabel" ref="table">
        	<el-table :data="dataList" style="width: 100%;" v-loading="loading" row-key="orderId" border :height="tableHeight"
            @selection-change="handleSelectionChange" default-expand-all>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div class="item-box d-flex">
                  <div class="item-box-item-1 d-flex" v-if="!hideTableColumn.includes('img')">
                  	<div class="goodsBox">
								      <div class="img">
								        <el-image :src="scope.row.userface" fit="fill" v-image-preview="scope.row.userface"></el-image>
								      </div>
								      <div class="goodsRight">
								        <div class="goodsName color-999 ellipsis-item font-size-13" style="margin:7px 0 8px 0">手机号:{{scope.row.telephone}}</div>
								        <!--<div class="goodsLabel d-flex">
								          <div class="color-999 d-flex margin-right-10 font-size-13">单价:{{item.salePrice}}</div>
								          <div class="color-999 d-flex font-size-13">数量:{{item.goodsNum?item.goodsNum:'1'}}</div>
								        </div>-->
								      </div>
								    </div>
                  </div>
                  <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('payMoney')">
                      {{scope.row.actualPayPrice}}
                  </div>
                  <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('serviceCharge')">
                      {{scope.row.serviceCharge}}
                  </div>
                  <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('status')">
                      <el-tag type="success" v-if="scope.row.orderStatus=='4'">已完成</el-tag>
                      <el-tag type="warning" v-else-if="scope.row.orderStatus=='1' || scope.row.orderStatus=='5'">已取消</el-tag>
                  </div>
                  <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('payMoney')">
                     {{ parseTime(scope.row.createTime) }}
                  </div>
                  <div class="align-center justify-center d-flex" style="width:300px" v-if="!hideTableColumn.includes('payMoney')">
                  		<p class="ellipsis-item">{{scope.row.remarks}}</p>

                  </div>
                  <div class="align-center justify-center d-flex flex1"  v-if="!hideTableColumn.includes('closeMoney')">
                      <el-button
		                   type="text"
		                   icon="el-icon-s-order"
		                   @click="handleDetail(scope.row)"
		                 >查看详情</el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
             <el-table-column prop="" label="用户信息" v-if="!hideTableColumn.includes('img')" width="400" align="center">
               <template #default="scope">
                <div class="d-flex">
                  <span class="font-size-13 color-999">订单编号:{{ scope.row.orderNo }}</span>
                  <span class="font-size-13 color-999 margin-left-10">订单类型:扫码订单</span>
                </div>
               </template>
             </el-table-column>

            <el-table-column prop="" label="付款总金额（元）" v-if="!hideTableColumn.includes('actualPayment')" align="center" width="160"></el-table-column>
						<el-table-column prop="" label="实收金额（元）" v-if="!hideTableColumn.includes('serviceCharge')" align="center" width="160"></el-table-column>
            <el-table-column prop="" label="状态" v-if="!hideTableColumn.includes('orderRemark')" width="160" align="center"></el-table-column>
            <el-table-column prop="" label="创建时间" v-if="!hideTableColumn.includes('status')" align="center"  width="160"> </el-table-column>
            <el-table-column prop="" label="支付备注" v-if="!hideTableColumn.includes('status')" align="center"  width="300" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="" label="用户评价"  v-if="!hideTableColumn.includes('active')" align="center" > </el-table-column>
          </el-table>

        </div>
        <div class="page" ref="page">
          <MyPagination
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>

      <!-- /*用户评价*/	 -->
      <el-dialog title="用户评价" width="600px" v-dialogDrag :visible.sync="rateVisible" @close="rateVisible = false">
        <el-form class="formDialog"  label-position="right">
          <el-form-item label="商品打分:" prop="name" label-width="125px" style="width:100%">
          		<div class="d-flex align-center" style="height: 40px;"><el-rate  v-model="statusRow.newScoreLevel" disabled   text-color="#ff9900" ></el-rate></div>

          </el-form-item>
          <el-form-item label="服务态度:" prop="name" label-width="125px" style="width:100%">
              	<div class="d-flex align-center" style="height: 40px;"><el-rate  v-model="statusRow.newServiceLevel" disabled   text-color="#ff9900" ></el-rate></div>
          </el-form-item>
          <el-form-item label="评价内容:" prop="name" label-width="125px" style="width:100%">
              {{statusRow.goodsEvaluate}}
          </el-form-item>
          <el-form-item label="图片:" prop="name" label-width="125px" style="width:100%">
            <el-image :src="item.fullFilename" fit="fill" v-image-preview="item.fullFilename" v-for="item in imgList" style="margin-left:10px;width:100px"></el-image>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rateVisible = false" size="small">关 闭</el-button>
        </div>
      </el-dialog>



  </div>
</template>

<script>
  import { isCard,isPhone,isEmail } from '../../common/validate.js';
  import common from '@/api/api';
  import {scanCodeGetOrderQuantity,scanCodeList,getOrderEvaluation,scanOrderExport} from '@/api/getData'
  import option from '../../common/option.js';
  import { regionData,CodeToText } from 'element-china-area-data';

  export default {
    data() {
      return {
        loading: false,
        userLoading: false,
        btnLoading: false,
        cascaderOptions:regionData,/*省市区插件数据*/
        menuIndexStatus:'0',
        menuList:[
          {msg: "待支付", count: 2, orderStatus: 1},
          {msg: "待发货", count: 0, orderStatus: 2},
          {msg: "待确认", count: 0, orderStatus: 3},
          {msg: "已完成", count: 0, orderStatus: 4},
          {msg: "待售后", count: 0, orderStatus: 5},
          {msg: "所有", count: 2, orderStatus: 0}],
        time:[],
        updateTime:[],
        searchForm: {
          orderNo: '',
          account:'',
          orderType:'',

          pageNum: 1,
          pageSize: 20,
        },
        tableColumn:[{
            name:'用户头像',
            value:'img'
        },{
            name:'用户手机号',
            value:'phone'
        },{
            name:'付款总金额(元)',
            value:'retailPrice'
        },{
            name:'服务费',
            value:'serviceCharge'
        },{
            name:'状态',
            value:'status'
        },{
            name:'支付备注',
            value:'orderRemark'
        },{
            name:'订单编号',
            value:'code'
        },{
            name:'用户评价',
            value:'rate'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:400,//table 高度
        dataList:[],
        total: 0,
        multipleSelection: '',
        dialogTitle: '',
        userFormVisible: false,
        afterInformationList:{},/*售后信息*/
        rules: { },

        rateVisible:false,//评价详情
        rateForm:{
          commodity:'',
          serviceAttitude:'',
          rateContent:''
        },
        shipmentsRules:{
          logisticsCompany: [{required: true, message: '请选择物流公司',trigger: 'blur'}],
          logisticsCode: [{required: true, message: '请填写物流单号',trigger: 'blur'}],
        },
        statusRow:{},
        imgList:[]
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      // this.getSelect();
      // this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.menuList.offsetHeight  - this.$refs.search.offsetHeight - this.$refs.page.offsetHeight - 65;
      })
    },
    methods: {
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time,'startOrderTime','endOrderTime');
          //data = this.addDateRange(this.searchForm, this.updateTime,'startUpdateTime','endUpdateTime');
          this.loading = true;
          const result = await scanCodeList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }

          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      /** 导出按钮操作 */
       handleExport() {
        let data = this.addDateRange(this.searchForm, this.orderTime,'startOrderTime','endOrderTime');
        data = this.addDateRange(this.searchForm, this.updateTime,'startUpdateTime','endUpdateTime');
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return scanOrderExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      getSelect(){
        scanCodeGetOrderQuantity().then((result) => {
          this.menuList = result.data;
        });
      },
      addressChange(arr) {
          console.log(arr);
          console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
          this.editAddr.provinceId = arr[0]+'000000';
          this.editAddr.cityId = arr[1]+'000000';
          this.editAddr.areaId = arr[2]+'000000';
      },
      handleDetail(row){/*查看详情*/
	     	getOrderEvaluation({orderId:row.orderId }).then((res)=>{
	     		let data = res.data.orderEvaluation;
	     		this.rateVisible = true;
	     		data.newScoreLevel = data.scoreLevel?(data.scoreLevel/2):0;
	     		data.newServiceLevel = data.serviceLevel?(data.serviceLevel/2):0;
	     		this.imgList = res.data.attachmentInfoList;
	     		console.log(data);
          this.statusRow = data;
	     	})

      },
      handleGoAfterSale(row){/*查看售后信息*/
        orderGetAfterSaleInfo({orderId:row.orderId}).then((result) => {
          this.afterInformationList = result.data[0];
        });
        this.userFormVisible = true;
      },

      handleShipments(row){//发货
        this.shipmentsVisible = true;
      },
      submitShipments(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            getCallRecord(this.user).then((result) => {
              if (result.success == true) {
                this.$message.success(result.message);
                this.userFormVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.message);
              }
              this.userLoading = false;
            });
          }
        })
      },
      handleEditAddr(row){//修改地址
        this.editAddrVisible = true;
      },
      submiteditAddr(formName) {/*修改地址提交*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            getCallRecord(this.user).then((result) => {
              if (result.success == true) {
                this.$message.success(result.message);
                this.userFormVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.message);
              }
              this.userLoading = false;
            });
          }
        })
      },
      handleRefund(row){//确定退款
        this.$confirm(`您确定将订单号为<span class="red">${row.name}</span>操作退款吗？`, '确定退款', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         dangerouslyUseHTMLString: true,
         type: 'warning'
        }).then(() => {
         getCallRecord(this.user).then((result) => {
           if (result.success == true) {
             this.$message.success(result.message);
             this.userFormVisible = false;
             this.dataInfo();
           } else {
             this.$message.error(result.message);
           }
           this.userLoading = false;
         });
       }).catch(() => {});
      },
      handleExchange(row){//确定换货
        this.$confirm(`您确定将订单号为<span class="red">${row.name}</span>操作换货吗？`, '确定换货', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
         }).then(() => {
          getCallRecord(this.user).then((result) => {
            if (result.success == true) {
              this.$message.success(result.message);
              this.userFormVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.message);
            }
            this.userLoading = false;
          });
        }).catch(() => {});

      },

      /** 重置按钮操作 */
      resetQuery() {
        this.time = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      handleItem(id){
        this.searchForm.orderStatus = id;
        this.dataInfo();
      },

      handleSearch() {
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },
      submitUser(formName) {
        /*添加用户*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.userLoading) return;
            this.userLoading = true;
            getCallRecord(this.user).then((result) => {
              if (result.success == true) {
                this.$message.success(result.message);
                this.userFormVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.message);
              }
              this.userLoading = false;
            });
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">
		.orderTabel /deep/ .el-table__row {
		     background: #FAFCFB !important;
		      height: 36px !important;
		      td{
		        padding:0px;
		        height:30px;
		      }
		  }
		  .orderTabel .el-table td .cell {
		      height: 30px;
		      display: flex;
		      align-items: center;
		  }
		  .item-box {
		      color: #444;
		      padding:10px 0;
		  }
		  .item-box-item-1{
		     width: 400px;
		     //padding: 16px 14px 14px;
		  }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .menuList{
      display: flex;
      margin-bottom: 15px;
      .menu-item{
        flex:1;
        padding:20px 20px 10px 20px;
        border:1px solid #DCDFE6;
        border-right: none;
        cursor: pointer;
        .numberBox{
          display:flex;
          justify-content:center;
        }
        .tipsNumber{
           font-size: 12px;
           height: 18px;
           line-height: 18px;
           padding: 0 6px;
           text-align: center;
           white-space: nowrap;
           position:absolute;
           background:#FF2F43;
           border-radius: 10px;
           right: -16px;
           top: -6px;
           color:#fff;
        }
        .number{
          font-size: 32px;
          position:relative;
        }
        .text{
          font-size: 16px;
          color:#333333;
          text-align: center;
        }
      }
    }
    .menuList .menu-item:last-child{
      border-right: 1px solid #DCDFE6;
    }
    .menuList .menu-item:hover{
      background-color:#D8E4DD;
    }
     .menuList .menu-item.active{
        background-color: #D8E4DD;
     }
     .formDialog /deep/ .el-form-item{
       margin-bottom: 5px;
     }

   .table /deep/ .el-table__expanded-cell{
     background: #FAFCFB;
      padding:0 50px;
    }
    .table /deep/ .el-table__expanded-cell:hover{
     background: #FAFCFB!important;
    }
    .table /deep/ .el-table__expanded-cell .el-form-item{
      margin-bottom: 0px;
      margin-right: 30px;
    }
    .table /deep/ .el-table__expanded-cell .el-form-item__label,.table /deep/ .el-table__expanded-cell .el-form-item__content{
       height: 54px;
       line-height: 54px;
    }
</style>
